<app-landing-page-header [title]="'Controversies Research'" [subTitle]="'Our controversies research identifies companies involved in incidents that may negatively impact stakeholders, the environment or the company’s operations'"></app-landing-page-header>

<div class="container mt-5">
    <h4>Features</h4>
    <div class="row mt-3">
      <div class="col-md-4">
        <h5>Controversy Rating</h5>
        <div class="d-flex flex-row mt-3">
          <img src="/assets/icons-svg/icon-controversy-landing.svg" class="research-icon flex-column" />
          <span class="flex-column pl-3">View controversies, rated on a scale from one to five, and read our assessments of it outlook for a two-year period</span>
        </div>
      </div>
      <div class="col-md-4">
        <h5>Geographic Spread</h5>
        <div class="d-flex flex-row mt-3">
          <img src="/assets/icons-svg/icon-geography.svg"class="research-icon flex-column" />
          <span class="flex-column pl-3">See the geographic spread of the company's controversies</span>
        </div>
      </div>
      <div class="col-md-4">
        <h5>Historical Development</h5>
        <div class="d-flex flex-row mt-3">
          <img src="/assets/icons-svg/icon-historical.svg"class="research-icon flex-column" />
          <span class="flex-column pl-3">Read how controversies developed over time</span>
        </div>
      </div>
    </div>

    <div *ngIf="productPermissions?.controversies" class="mt-5">
      <sustainalytics-table class="col-md-8" #table [columns]="columns" [source]="source" [filter]="filter" [elementCount]="elementCount" [paginationPositionDisplay]="paginationPosition"
        [displayTitle]="false" (changed)="tableOptionsChanged($event)">
      </sustainalytics-table>
    </div>
</div>